<template> 
    <div class="login-container"> 
     <!-- 表头 --> 
     <van-nav-bar class="app-nav-bar" title="注册 / 登录" left-arrow="" @click-left="$router.back()" /> 
     <!-- /表头 --> 
     <!-- 登录表单 --> 
     <!-- 
         基于 Vant 的表单验证:
         1. 使用van-form 组件包裹所有的表单项 van-field,van-cell-group 只会加单元格,所以要换成表单
         2. 给van-form绑定submit事件,表单提交的时候会触发 @submit="onSubmit",表单会自动触发提示,只有表单验证通过, 它才会调用 submit 事件
         3. 使用 Field 的 rules 属性定义校验规则
      --> 
     <van-form  
     :show-error="false"
     :show-error-message="false"
     :validate-first="true"
     ref="login-form"
     @submit="onLogin"
     @failed="onFailed"
     > 
      <van-field 
      v-model="user.mobile" 
      icon-prefix="toutiao" 
      left-icon="shouji"
      center
      placeholder="请输入手机号"
      name="mobile"
      :rules="formRolus.mobile" /> 
      <van-field 
      v-model="user.code" 
      clearable="" 
      icon-prefix="toutiao" 
      left-icon="suo"
      center
      placeholder="请输入验证码"
      name="code"
      :rules="formRolus.code">
      <!-- validate 验证表单，支持传入 name 来验证单个或部分表单项 -->
       <template #button="">
        <van-count-down
        v-if="isCountDownShow"
        :time="1000 * 60"
        format="ss s"
        @finish="isCountDownShow = false"
        />
        <van-button
        v-else
        class="send-btn" 
        size="mini" 
        round=""
        :loading="isSendSmsLoading"
        @click.prevent="onSendSms">
         发送验证码
        </van-button> 
       </template> 
      </van-field> 
      <div class="login-btn-wrap"> 
       <van-button 
       class="login-btn" 
       type="info" 
       block="">
        登录 
       </van-button> 
      </div> 
     </van-form> 
     <!-- /登录表单 --> 
    </div> 
   </template>

<script>
  import {
  login,
  sendSms
}
from "@/api/user"
import { Toast } from "vant"
import { setUser } from "@/store/index"
export default {
    name:
    'LoginIndex',
    data() {
      return {
      user: {
        mobile: '17090086870', //手机号
        code: '246810' // 验证码
      },
      formRolus: {
        mobile: [{
          required: true,
          message: '请输入手机号'
        },
        {
          pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
          message: '手机号格式错误'
        }],
        code: [{
          required: true,
          message: '请输入验证码'
        },
        {
          pattern: /^\d{6}$/,
          message: '验证码格式错误'
        }]
      },
      // 控制倒计时和发送按钮的显示状态
      isCountDownShow: false,
      // 发送验证码按钮的 loading 状态
      isSendSmsLoading: false
    };
    },
    methods: {
      // 请求用户数据
      async onLogin() {
        if (this.user.mobile == '') {
          Toast('请输入手机号') 
          return
        } else if (this.user.code == '') {
          Toast('请输入验证码') 
          return
        }
        Toast.loading({
          message: '登录中...',
          // 提示文本
          forbidClick: true,
          // 是否禁止背景点击,意思就是加载中是否让点击,别的区域,true是不让
          duration: 0 // 展示时长(ms)，值为 0 时，toast 不会消失,默认2000
        });
        // 1. 找到数据接口
        // 2. 封装请求方法
        // 3. 请求调用登录
        try {
          // const res = await login(this.user)
          // 因为太长,我只要data可以用解构的写法
          const {data} =  await login(this.user)
          Toast.success('登录成功')
          // 将后端放回的用户登录状态(token等数据) 放到 Vuex 容器中
          this.$store.commit('setUser', data.data)
          // 登录成功跳转会原来的页面
          this.$router.go(-1)
        } catch(err) {
          console.log(err);
          Toast.fail('登录失败,手机号或者验证码错误')
        }
        // 4. 处理响应结果
      },
      // 错误提醒事件
      onFailed (error) {
        Toast(
          {
            message:error.errors[0].message,
            position: 'top'
          })
      },
      async onSendSms() {
        // @click.prevent vue中的一个事件修饰符,功能是阻止默认行为
        try {
          // 校验手机号
          await this.$refs['login-form'].validate('mobile')
          // loading 状态,防止网络慢,用户多次点击触发发送行为
          this.isSendSmsLoading = true
          // 验证通过,请求发送验证码
          await sendSms(this.user.mobile)
          //短信发出去了,要显示倒计时
          this.isCountDownShow = true
          // 倒计时结束显示按钮(监视倒计时的 finish 时间处理) 
        } 
        catch (error) {
          // try 里面的任何错误都会进入 catch
          let message = ''
          if(error && error.response && error.response.status === 429) {
            message = '发送太频繁了,请稍后重试 '
          } else if (error && error.response && error.response.status === 507) {
            message = '服务器异常'
          } else if (error.name === 'mobile') {
            // 表单验证失败的错误
            message = error.message
          } else {
            // 未知错误
            message = '发送失败,请稍后重试'
          }
          Toast(
            {
              message,
              position: 'top'
            })
        }
        //无论发送验证码成功还是失败,最后都要关闭发送按钮的 loading 状态
        this.isSendSmsLoading = false
      }
    }
  }
</script>
<style>
  .login-container .login-btn-wrap
{
	padding: 26px 16px !important;
}

.login-container .login-btn
{
	background: #6db4fb;
	border: none;
}

.login-btn .van-button__text
{
	font-size: 15px;
}

.login-container .send-btn
{
	width: 76px;
	height: 23px;
	background: #ededed;
	border: none;
}

.send-btn .van-button__text
{
	font-size: 11px;
	color: #666666;
}
</style>